<template>
	<view>
		<view class="header">
			<image src="../../../static/icons/arrl.png" mode=""@tap="back"></image>
			<text>乐居</text>
		</view>
		<view class="tab">
			<view @tap="tabCut(item.id)" class="tab-item" :class="current == item.id ? 'active' : ''" v-for="item in tabList" :key="item.id">{{item.cname}}</view>
		</view>
		<!-- 订单列表 -->
		<view class="order-list">
			<view class="order-item" v-for="item in list" :key="item.id">
				<view class="left">
					<image :src="item.items[0].productPic" mode=""></image>
				</view>
				<view class="right">
					<view>{{item.items[0].productName}}</view>
					<view>价格:{{item.items[0].productPrice}}元</view>
					<view>x{{item.items[0].productQuantity}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { findAllOrders } from "../../../api/user/orderForm.js"
	export default {
		data() {
			return {
				current:0,
				list1:[],
				tabList:[
					{
						cname:"待付款",
						id:"0"
					},
					{
						cname:"已付款",
						id:"1"
					},
					{
						cname:"已发货",
						id:"2"
					},
					{
						cname:"已收货",
						id:"3"
					},
					{
						cname:"申请退款",
						id:"4"
					},
				]
			};
		},
		computed:{
			list() {
				if (this.current == 3 || this.current == 4) {
					return this.list1.filter(el=>el.order.status == this.current == 3 || this.current == 4)
				} else {
					return this.list1.filter(el=>el.order.status == this.current)
				}
				
			}
		},
		methods:{
			back() {
				uni.switchTab({
					url:"/pages/user/user"
				})
			},
			init() {
				findAllOrders().then(res=>{
					// console.log(res)
					this.list1 = res.data.orderList
					console.log(this.list1)
				})
			},
			tabCut(id) {
				this.current = id
			}
		},
		onLoad(options) {
			console.log(options)
			this.init()
			  
		}
	}
</script>

<style lang="scss" scoped>
.header {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #354e44;
	height: 60rpx;
	padding: 14rpx 6rpx;
	image {
		position: absolute;
		left: 4rpx;
		top: 50%;
		transform: translateY(-50%);
		width: 40rpx;
		height: 40rpx;
	}
	text {
		font-size: 32rpx;
		color: #FFFFFF;
		font-weight: bolder;
	}
}
.tab {
	display: flex;
	justify-content: space-around;
	background-color: #354e44;
	color: #FFFFFF;
	font-size: 30rpx;
	line-height: 62rpx;
	.tab-item {
		&.active {
			color: #DD524D;
		}
	}
}
.order-list {
	.order-item {
		display: flex;
		justify-content: space-around;
		width: 94%;
		box-sizing: border-box;
		padding: 30rpx;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		margin: 40rpx auto;
		>view {
			&:first-child {
				width: 162rpx;
				height: 162rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
			&:last-child {
				width: fit-content;
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				view {
					margin-bottom: 10rpx;
				}
			}
		}
	}
}
</style>
